<?php

use yii\helpers\Html;
use yii\helpers\Url;
use yii\grid\GridView;
use yii\widgets\ActiveForm;

/* @var $this yii\web\View */
/* @var $dataProvider yii\data\ActiveDataProvider */

$this->title = $vote['title'];
$this->params['breadcrumbs'][] = $this->title;
if(\Yii::$app->session->hasFlash('success')) echo "<div id='showm' style='display:none'>1</div>";
?>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
  wx.config({
    debug: false,
    appId: '<?php echo $signPackage["appId"];?>',
    timestamp: <?php echo $signPackage["timestamp"];?>,
    nonceStr: '<?php echo $signPackage["nonceStr"];?>',
    signature: '<?php echo $signPackage["signature"];?>',
    jsApiList: [
        'onMenuShareTimeline',
        'onMenuShareAppMessage',
    ]
  });
  wx.ready(function () {
    // 在这里调用 API
    wx.onMenuShareTimeline({
          title: '莲都区第五届道德模范候选人', // 分享标题
          imgUrl: 'http://www.lsol.com.cn/ad/lsol_tp_topbg.jpg', // 分享图标
    });
    wx.onMenuShareAppMessage({
          title: '莲都区第五届道德模范候选人', // 分享标题
          desc: '为深入推进莲都区文明创建工作，集中展示公民道德建设的丰硕成果，广泛动员广大群众支持和参与道德建设，推动社会主义核心价值体系建设，莲都区委、区政府决定开展莲都区第五届道德模范评选表彰活动。', // 分享描述
          imgUrl: 'http://www.lsol.com.cn/ad/lsol_tp_topbg.jpg', // 分享图标
          type: '', // 分享类型,music、video或link，不填默认为link
          dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
    });
  });
</script>

<div class="row">
<img src="http://www.lsol.com.cn/ad/lsol_tp_topbg.jpg" class="img-responsive" />
</div>
<div class="alert alert-danger alert-dismissible fade in" style=" margin-left: -15px; margin-bottom:0px; border-radius: 0px; margin-right: -15px; " role="alert">
<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
    <?= $vote['rules']?>
</div>
<?php if(isset(\Yii::$app->params['votedate'])){?>
<div id="isvote" style="display:none">1</div>
<div class="alert alert-danger alert-dismissible fade in" style="margin-top:15px;" role="alert">
    <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
    <p> <strong>注意!</strong>你今天已投过票了,请明天再来!</p>
</div>
<?php }?>

<div ng-app="myApp" ng-controller="myCtrl" ng-init="myInit()" style="margin-top:15px;">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<?php $form = ActiveForm::begin(['action' => Url::to(['site/post']), 'id'=>'postform']) ?>
<?php foreach($vote['category'] as $key=>$category){?>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab">
      <h4 class="panel-title">
        <a data-toggle="collapse" href="#collapse<?= $category['id']?>" aria-controls="collapse<?= $category['id']?>">
            <?= $category['title']?>-该组请选择
            <span class="text-danger"><?= $category['num']?></span> 位候选人 
        </a>

      </h4>
    </div>
    <div id="collapse<?= $category['id']?>" class="panel-collapse collapse in" role="tabpanel">
      <div class="panel-body">
        <div class="row">
        <?php foreach($category['voteplayer'] as $player){?>
          <div class="col-sm-6 col-xs-6">
            <div class="thumbnail">
            <span class="label label-warning posta"><?= isset($player['votes']) ? $player['votes'] : "0"?>票</span>
              <img ng-click="infoClick($event)" data-id="<?= $player['id']?>" src="/tp/backend/web/<?= $player['thumb']?>" alt="...">
              <div class="caption">
              <div class="checkbox">
                  <label>
                      <input type="checkbox" name="key<?= $key?>[]" ng-click="myFunc($event)" value="<?= $player['id']?>"> <?= $player['title']?>
                  </label>
              </div>
              </div>
            </div>
          </div>
        <?php }?>
        </div>
      </div>
    </div>
  </div>
<?php }?>
</div>
<br><br>
<nav class="navbar navbar-default navbar-fixed-bottom">
    <div class="container" style="padding-top:10px;">
        <?= Html::Button('选满后可投票', ['class' => 'btn btn-danger btn-sm btn-block', "ng-click"=>"isClick()", "ng-disabled"=>"isDisabled"]) ?>
    </div>
</nav>
<?php ActiveForm::end(); ?>

<!-- Modal -->
<div class="modal fade" id="infoModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">{{infoName}}</h4>
      </div>
      <div class="modal-body" ng-bind-html="infoContent">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

</div>

<!-- Modal -->
<div class="modal fade" id="focusModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">提示</h4>
      </div>
      <div class="modal-body text-center">
        长按图片，识别图中二维码。<br>
        <img src="http://www.lsol.com.cn/ad/lsol_wx.jpg" /><br>
        关注丽水在线微信号，点击底部导航栏“投票评选”。
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

<!-- Modal -->
<div class="modal fade" id="timeModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">活动提示</h4>
      </div>
      <div class="modal-body text-center">
           活动开始时间: <?= date('Y-m-d H:i:s',\Yii::$app->params['time_start'])?><br>活动结束时间: <?= date('Y-m-d H:i:s', \Yii::$app->params['time_end'])?> 
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>


<!-- Modal -->
<div class="modal fade" id="showModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">投票提示</h4>
      </div>
      <div class="modal-body">
        <?php echo \Yii::$app->session->getFlash('success');?>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>


<script>
var app = angular.module('myApp', ['ngSanitize']);
app.controller('myCtrl', function($scope,$http) {
    $scope.myarray = <?= $json_string?>;
    //$scope.myarray = [{"id":"2","num":"2"},{"id":"3","num":"2"},{"id":"4","num":"1"},{"id":"5","num":"2"},{"id":"6","num":"3"}];

    $scope.infoName = '';
    $scope.infoContent = '';

    $scope.isFocus = <?= \Yii::$app->params['isfocus'] ?>;

    $scope.isTime = <?= \Yii::$app->params['istime']?>;

    $scope.isDisabled = true;

    $scope.myInit = function(){
        if($scope.isTime == '0'){
            $('#timeModel').modal('show');
            $(":checkbox").attr("disabled", "disabled");//所有未选中状态的不可用
        }
        if($scope.isTime == '-1'){
            $('#timeModel').modal('show');
            $(":checkbox").attr("disabled", "disabled");//所有未选中状态的不可用
        }

        if($('#showm').html() == '1'){
            $('#showModel').modal('show');
        }

        if($scope.isFocus == 0){
            $('#focusModel').modal('show');
            $(":checkbox").attr("disabled", "disabled");//所有未选中状态的不可用
        }

        if($("#isvote").html() == '1'){
            $(":checkbox").attr("disabled", "disabled");//所有未选中状态的不可用
        }
    }

    $scope.infoClick = function($event){
        playerid = $event.target.dataset.id;
        $http.get("http://weixin.lsol.com.cn/tp/frontend/web/index.php?r=site/view&id="+playerid)
        .success(function(response) {
            $scope.infoName = response.title;
            $scope.infoContent = response.digest;
            //$scope.names = response.records;
        });
        $('#infoModel').modal('show');
    }

    $scope.isClick = function(){
        $scope.isDisabled = true;
        $("#postform").submit();
    }
    $scope.myFunc = function($event){
        checkbox = $event.target;//获取dom
        name = $event.target.name;//获取分组
        if(checkbox.checked){//选中
            $scope.myarray[name].isnum++;
        }else{//未选中
            $scope.myarray[name].isnum--;
        }

        //判断是否大于个数
        if($scope.myarray[name].isnum == $scope.myarray[name].num){
            $scope.myarray[name].status = true;
            $("input[name='"+name+"']").not("input:checked").attr("disabled", "disabled");//所有未选中状态的不可用
        }else{
            $scope.myarray[name].status = false;
            $("input[name='"+name+"']").removeAttr("disabled");                
        }

        isTrue = false; //为false时通过
        //console.log($scope.myarray[name]);
        for (var key in $scope.myarray) { //只要有一个组不对就设isTrue为true不通过
            //console.log($scope.myarray[key]);
            if($scope.myarray[key].status === false){
                isTrue = true;
            }
        }

        //只要全部都选中，就可以提交按钮
        if(isTrue === false){
            console.log('对了');
            $scope.isDisabled = false;
        }else{
            $scope.isDisabled = true;
        }
        
    }
});
</script>
